﻿<template>
    <div id="app">
        <Row style="border-bottom:1px solid #f2f2f2;border-top:1px solid #f2f2f2">
            <Col span="12" style="padding-top:5px;padding-left:10px;">
            <div id="marquee">
             
                <div class="marquee_box">
                    <ul class="marquee_list">
                        <li v-for="(item,index)  in data" :key="item.id">{{item.title}}</li>
                    </ul>
                </div>
            </div>
           

            </Col>
            <Col span="12" style="padding-top:10px;padding-right:10px;height:30px;vertical-align:middle">
            <span style="float:right" @click="more()">更多</span>
            </Col>
        </Row>
    </div>
</template>

<script>
    import Bus from '../bus.js'
    export default {
        data() {
            return {
                animate: false,
               

            }
        },
        props: {
            data: Array
        },
        methods:
        {
            showMarquee: function () {
                this.animate = true;

                setTimeout(() => {
                    this.data.push(this.data[0]);

                    this.data.shift();

                    this.animate = false;
                }, 500);
            },
            more: function () {
                Bus.$emit('val', "hide")
           
                Bus.$emit('backshow', '1');
                this.$router.push('/news');
            }


        },
        created() {
            setInterval(this.showMarquee, 2000);
        }
    }
</script>

<style scoped>
    .marquee {
        width: 100%;
        height: 50px;
        align-items: center;
        color: #3a3a3a;
        background-color: white;
        display: flex;
        box-sizing: border-box;
        overflow: hidden;
    }



    .marquee_box {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;
        overflow: hidden;
    }

    .marquee_list {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    .marquee_top {
        transition: all 0.5s;
        margin-top: -30px;
    }

    .marquee_list li {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        padding-left: 20px;
    }

        .marquee_list li span {
            padding: 0 2px;
        }


</style>